<table id="tg" class="easyui-treegrid"
	data-options="
		iconCls: 'icon-ok',
		fit:true,
		rownumbers: true,
		toolbar:'#tg-tb',
		animate: true,
		collapsible: true,
		fitColumns: true,
		url: '../treegrid/treegrid_data2.json',
		idField: 'id',
		treeField: 'name',
		loadFilter: pagerFilter,
		pagination: true,
		pageSize: 2,
		pageList: [2,5,10]
">

	<thead>
		<tr>
			<th data-options="field:'name',width:180">Task Name</th>
			<th data-options="field:'persons',width:60,align:'right'">Persons</th>
			<th data-options="field:'begin',width:80">Begin Date</th>
			<th data-options="field:'end',width:80">End Date</th>
			<th
				data-options="field:'progress',width:120,formatter:formatProgress">Progress</th>
		</tr>
	</thead>
</table>

<div id="tg-tb">
	<div style="padding:5px;">
		<a 	class="easyui-linkbutton wm-ajax" data-options="iconCls:'icon-add'"
			wmw='400' wmh='300' wmtitle='新的类别' wmid="wm-goods-cat-add"
			href="{{url ctl=goods_cat act=add}}" 
		>添加类别</a>
		
		<a href="#" class="easyui-linkbutton">展开所有</a>
		<a href="#" class="easyui-linkbutton">折叠所有</a>
	</div>
</div>


<script type="text/javascript">

	function formatProgress(value) {
		if (value) {
			var s = '<div style="width:100%;border:1px solid #ccc">'
					+ '<div style="width:' + value
					+ '%;background:#cc0000;color:#fff">' + value + '%'
					+ '</div>'
			'</div>';
			return s;
		} else {
			return '';
		}
	}
	function pagerFilter(data) {
		if ($.isArray(data)) { // is array
			data = {
				total : data.length,
				rows : data
			}
		}
		var dg = $(this);
		var state = dg.data('treegrid');
		var opts = dg.treegrid('options');
		var pager = dg.treegrid('getPager');
		pager.pagination({
			onSelectPage : function(pageNum, pageSize) {
				opts.pageNumber = pageNum;
				opts.pageSize = pageSize;
				pager.pagination('refresh', {
					pageNumber : pageNum,
					pageSize : pageSize
				});
				dg.treegrid('loadData', data);
			}
		});
		if (!data.topRows) {
			data.topRows = [];
			data.childRows = [];
			for ( var i = 0; i < data.rows.length; i++) {
				var row = data.rows[i];
				row._parentId ? data.childRows.push(row) : data.topRows
						.push(row);
			}
			data.total = (data.topRows.length);
		}
		var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
		var end = start + parseInt(opts.pageSize);
		data.rows = $.extend(true, [], data.topRows.slice(start, end).concat(
				data.childRows));
		return data;
	}
	
	$(function(){
		$('#tg').datagrid({
			width : $('#main-container').width(),
			height : $('#main-container').height()
		});
	});
</script>
